extends ./chrome.jade

block content
  style.
    * {
      box-sizing: border-box;
    }

    body, html {
      width: 100%;
      height: 100%;
      margin: 0;
      background-color: #F5F5F5;
    }
    .kibanaWelcomeView {
      background-color: #F5F5F5;
    }

    .kibanaWelcomeText {
      color: #222;
      font-size: 14px;
      font-family: Sans-serif;
      margin-top: 20px;
      color: #666;
      animation: fadeIn 1s ease-in-out;
      animation-fill-mode: forwards;
      opacity: 0;
      animation-delay: 1.0s;
    }

    .kibanaLoaderWrap {
      height: 128px;
      width: 128px;
      position: relative;
      margin-top: 40px;
    }

    .kibanaLoader {
      height: 128px;
      width: 128px;
      margin: 0 auto;
      position: relative;
      border: 2px solid transparent;
      border-top: 2px solid #00A69B;
      border-radius: 100%;
      display: block;
      opacity: 0;
      animation: rotation .75s .5s infinite linear, fadeIn 1s .5s ease-in-out forwards;
    }

    .kibanaWelcomeLogoCircle {
      position: absolute;
      left: 4px;
      top: 4px;
      width: 120px;
      height: 120px;
      padding: 20px;
      background-color: #FFF;
      border-radius: 50%;
      animation: bounceIn .5s ease-in-out;
    }

    .kibanaWelcomeLogo {
      background-image: url("");
      background-repeat: no-repeat;
      background-size: contain;
      width: 60px;
      height: 60px;
      margin: 10px 0px 10px 20px;
    }

    @keyframes rotation {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(359deg);
      }
    }
    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    @keyframes bounceIn {
      0% {
        opacity: 0;
        transform: scale(.1);
      }
      80% {
        opacity: .5;
        transform: scale(1.2);
      }
      100% {
        opacity: 1;
        transform: scale(1);
      }
    }


  .kibanaWelcomeView
    .kibanaLoaderWrap
      .kibanaLoader
      .kibanaWelcomeLogoCircle
        .kibanaWelcomeLogo
    .kibanaWelcomeText
      | #{i18n('UI-WELCOME_MESSAGE')}

  script.
    window.onload = function () {
      var buildNum = #{kibanaPayload.buildNum};
      var cacheParam = buildNum ? '?v=' + buildNum : '';
      function bundleFile(filename) {
        var anchor = document.createElement('a');
        anchor.setAttribute('href', !{JSON.stringify(bundlePath)} + '/' + filename + cacheParam);
        return anchor.href;
      }
      var files = [
        bundleFile('commons.style.css'),
        bundleFile('#{app.getId()}.style.css'),
        bundleFile('commons.bundle.js'),
        bundleFile('#{app.getId()}.bundle.js')
      ];

      (function next() {
        var file = files.shift();
        if (!file) return;

        var failure = function () {
          // make subsequent calls to failure() noop
          failure = function () {};

          var err = document.createElement('h1');
          err.style['color'] = 'white';
          err.style['font-family'] = 'monospace';
          err.style['text-align'] = 'center';
          err.style['background'] = '#F44336';
          err.style['padding'] = '25px';
          err.innerText = '#{i18n('UI-WELCOME_ERROR')}';

          document.body.innerHTML = err.outerHTML;
        }

        var type = /\.js(\?.+)?$/.test(file) ? 'script' : 'link';
        var dom = document.createElement(type);
        dom.setAttribute('async', '');
        dom.addEventListener('error', failure);

        if (type === 'script') {
          dom.setAttribute('src', file);
          dom.addEventListener('load', next);
          document.head.appendChild(dom);
        } else {
          dom.setAttribute('rel', 'stylesheet');
          dom.setAttribute('href', file);
          document.head.appendChild(dom);
          next();
        }
      }());
    };
